<template>
    <view class="content">
        <view class="login">
            <view class="title">您好，{{ vuex_user.nickname }} <text v-if="vuex_user.is_partner">（合伙人）</text></view>
            <view class="c1">获取商家活动系统权限，首先需要取得浏览资格</view>
            <view class="c2">请选择支付方式</view>
            <view class="c3">
                <view class="in-1" @click='type = 1' :class="{active: type == 1}"></view>
                <view class="text">现金{{ vuex_theme.shop_money }}元/年</view>
            </view>
            <view class="c3" v-if="userRawData.is_partner">
                <view class="in-1" @click='type = 2' :class="{active: type == 2 }"></view>
                <view class="text">支付绿石头{{ vuex_theme.merchant_renewal_stone }}个/年 (当前绿石头{{userRawData.green_stone_amount}}个)</view>
            </view>
        </view>

        <view class="but">
            <u-button type="primary" text="支付费用" color='#7677EB' @click="onSend()"></u-button>
        </view>

        <u-notify ref="uNotify" message="Hi uView"></u-notify>
    </view>
</template>

<script>
	import {
		getRawUserInfo
	} from '@/api/user.js'
	
	import conf from "@/common/config.js"
	import utils from "@/common/util.js"
	
	// #ifdef H5
	var jweixin = require('jweixin-module')
	// #endif
	
	
    export default {
		onLoad() {
			getRawUserInfo().then(res => {
				if (1 == res.code) {
					this.userRawData = res.data
					this.$u.vuex('vuex_user.mp_openid', res.data.mp_openid);
				}
			});
		},
        data() {
            return {
                type: 1,
				userRawData: '',
            }
        },
        onShow() {
            if (this.vuex_token == '') {
                uni.redirectTo({
                    url: '/pages/my/login'
                })
                return false;
            }
			
			// let endDate = new Date(this.vuex_user.shop_end_time)
			// let currentDate = new Date()
			// if (this.vuex_user.is_shop >= 1 && endDate > currentDate ) {
			//     uni.redirectTo({
			//         url: '/pages/activity/index'
			//     })
			// }
        },
        methods: {
            radioChange(n) {
                console.log('radioChange', n);
            },
            onSend() {
                if (this.type == 1) {
					let that = this
					
					if (utils.isNormalBrowser()) {
						var obj = {
							pay_way: 'h5',
							type: 'renew_merchant_role', //创建支付的类型
							user_id: this.vuex_user.id  // 用户id
						}
						var jsonString = JSON.stringify(obj);
						var urlEncodedData = encodeURIComponent(jsonString);
						
						window.location.href = '/index.php/api/order/createTransaction?info=' + urlEncodedData;
					} else if (utils.isWechatBrowser()) {
						if (!this.vuex_user.mp_openid) {
							uni.showModal({
								title: '提示',
								content: '用户使用微信浏览器支付需绑定超田公众号',
								success: function(res) {
									if (res.confirm) {
										let appid = conf.gzh_appid
										let uri =
											'https://h5.pyhhzapp.com/index.php/index/index/getopenid/user_id/' +
											that.vuex_user.id + '/currentpage/' + btoa(window.location.href)
											.replace('/', 'ctkkk')
										let authURL =
											`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
						
										// console.log(authURL)
										window.location.href = authURL;
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							var obj = {
								pay_way: 'jssdk',
								type: 'renew_merchant_role', //创建支付的类型
								user_id: this.vuex_user.id  // 用户id
							}
							var jsonString = JSON.stringify(obj);
							var urlEncodedData = encodeURIComponent(jsonString);
						
							// 有openid, 开始进行公众号的支付
							let url = window.location.href
							this.$API.jssdkConfig({
									url: url,
									api_list: [
										'chooseWXPay'
									].join("-")
								}).then(res => {
									console.log(res);
									let data = res.data
									if (res.code) {
										jweixin.config({
											debug: false,
											appId: data.appId,
											timestamp: data.timestamp,
											nonceStr: data.nonceStr,
											signature: data.signature,
											jsApiList: data.jsApiList,
										});
										jweixin.error(function(res) {
											// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
											console.log('anything wrong');
											console.log(res);
										})
									}
								})
								.then(() => {
									jweixin.ready(() => {
										this.$API.createTransaction({
											info: urlEncodedData
										}).then(res => {
											console.log(res);
											let data = res.data
						
											if (res.code) {
												jweixin.chooseWXPay({
													timestamp: data.timeStamp,
													nonceStr: data.nonceStr,
													package: data.package,
													signType: data.signType,
													paySign: data.paySign,
													success: (res) => {
														// 支付成功后的回调函数
														console.log(res);
						
														// 跳转到检查支付结果的中间页
														window.location.href = data.return_url
													}
												});
											}
						
						
										})
									})
								})
						
						}
					}
                } else {
                    this.$API.sendPayhistory({type: this.type}).then(res => {
                        this.$u.vuex('vuex_user', res.data.userInfo);
                        uni.showModal({
                            content: '续期成功',
                            showCancel: false,
                            success:function(){
                                uni.navigateTo({
                                    url: '/pages/merchant/index'
                                })
                            }
                        })
                    })
                }
            },
        }
    }
</script>


<style lang="scss">
    .content {
        @include flex(column);
        align-items: center;
        justify-content: center;
        width: 670rpx;
        margin: 32rpx auto;

        .logo {
            width: 598rpx;
            height: 80rpx;
            margin: 32rpx auto 0 auto;
            @include flex;
            justify-content: center;
            align-items: center;

            .s1 {
                @include flex;
                align-items: center;

                image {
                    width: 80rpx;
                    height: 80rpx;
                }

                text {
                    height: 80rpx;
                    font-size: 40rpx;
                    font-weight: 600;
                    color: #3D3D3D;
                    line-height: 80rpx;
                    margin-left: 24rpx;
                }
            }
        }

        .login {
            width: 566rpx;
            background-color: #fff;
            border-radius: 48rpx;
            padding: 52rpx;
            margin-top: 60rpx;

            .title {
                // height: 36rpx;
                font-size: 34rpx;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: 600;
                color: #110202;
                line-height: 36rpx;
            }

            .c1 {
                height: 28rpx;
                font-size: 28rpx;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: 500;
                color: #7677EB;
                line-height: 28rpx;
                margin-top: 48rpx;
            }

            .c2 {
                height: 48rpx;
                font-size: 28rpx;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: 400;
                color: #7D8592;
                line-height: 48rpx;
                margin-top: 48rpx;
            }

            .c3 {
                margin-top: 28rpx;
                @include flex;
                align-items: center;
                
                .in-1 {
                    width: 40rpx;
                    height: 40rpx;
                    background: #D8E0F0;
                    border-radius: 50%;
                    position: relative;
                    
                    &::before {
                        content: "";
                        position: absolute;
                        width: 32rpx;
                        height: 32rpx;
                        background: #fff;
                        border-radius: 50%;
                        left: 4rpx;
                        top: 4rpx;
                    }
                    &.active {
                        &::after {
                            content: "";
                            position: absolute;
                            width: 20rpx;
                            height: 20rpx;
                            background: #7677EB;
                            border-radius: 50%;
                            left: 10rpx;
                            top: 10rpx;
                        }
                    }
                }
                .text {
                    // height: 42rpx;
                    font-size: 28rpx;
                    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                    font-weight: 400;
                    color: #110202;
                    line-height: 42rpx;
                    margin-left: 28rpx;
                }
            }

        }

        .but {
            width: 286rpx;
            height: 88rpx;
            margin: 60rpx auto;

            /deep/ .u-button {
                height: 88rpx;
                border-radius: 28rpx;
            }
        }
    }
</style>